<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['getDetail'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' },
      theme: 'default'
    }
  },
  methods: {
  },
  computed: {
    option () {
      return {
        animation: this.getDetail.animation,
        dataset: {
          source: this.getDetail.sheetData
        },
        series: this.getDetail.simplePie,
        title: this.getDetail.title,
        legend: this.getDetail.legend,
        tooltip: {},
        color: this.getDetail.color[this.getDetail.color.option],
        backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
<style>

</style>
